<template>
	<view class="tbody" v-if="data_info.title">
		<!-- 文章标题 -->
		<view class="article">
			{{data_info.title}}
		</view>
		<!-- 发布人发布时间 -->
		<view class="issue">
			<view class="issue-person">
				发布：{{data_info.createName}}
			</view>
			<view class="issue-time">
				时间：{{data_info.createTime}}
			</view>
		</view>
		<!-- 图片 -->
		<!-- <image :src="ip + data_info.coverImage" style="width: 100%; height: 420rpx;margin-bottom: 40rpx;" mode=""></image> -->
		<!-- 文字 -->
		<view class="text">
			<rich-text style="word-wrap:break-word; word-break:break-all;" class="ql-editor" :nodes="data_info.content"></rich-text>

			<!-- <view class="content">
				{{data_info.content}}
			</view> -->
		</view>


	</view>
</template>
<script>
	export default {
		data() {
			return {
				ip: this.$store.state.user.URL,
				times: 180,
				data: {
					id: 1
				},
				data_info: {}
			}
		},
		onLoad(options) {
			// 赋值给准备好的变量
			this.data.id = Number(options.id)
		},
		onUnload() {
		},
		onShow() {
			this.getLearningcontent()
		},
		methods: {
			// 获取轮播图详情信息
			async getLearningcontent() {
				const res = await uni.$http.get(`/business/slideshow/${this.data.id}`)
				console.log(res);
				if (res.data.code == 200) {
					// 用正则替换所有img标签
					res.data.data.content = res.data.data.content.replace(/src="/g,
						"style=\"width: 100%; height: 420rpx;\" src=\"" + this.ip);
					res.data.data.content = res.data.data.content.replace(/<\/p><p><img/g, '<img');
					res.data.data.content = res.data.data.content.replace(/<span\s+style=(['"])(.*?)\1/gi, "<span style='display:block;text-indent: 2em; $2'");
					this.isLearn = res.data.data.isLearn
					this.state = res.data.data.state
					this.data_info = res.data.data
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tbody {
		padding: 80rpx 0 100rpx 0;
		background-color: #fff !important;
	}

	.article {
		font-size: 32rpx;
		font-weight: 700;
		color: rgba(20, 58, 64, 1);
		text-align: center;
		margin-bottom: 42rpx;
	}

	.issue {
		display: flex;
		justify-content: center;
		font-size: 20rpx;
		font-weight: 400;
		color: rgba(20, 58, 64, 1);
		margin-bottom: 60rpx;

		.issue-person {
			margin-right: 43rpx;
		}

		.issue-time {}
	}

	.text {
		padding: 0 30rpx 0 34rpx;

		.content {
			text-indent: 2em;
			line-height: 36rpx;
			font-size: 24rpx;
			font-weight: 400;
			margin-bottom: 20rpx;
		}
	}

	.study-status-time {
		width: 680rpx;
		height: 88rpx;
		opacity: 1;
		border-radius: 60rpx;
		background: rgba(188, 211, 214, 1);
		margin-left: 32rpx;
		line-height: 88rpx;
		text-align: center;
		margin-top: 30rpx;
		font-size: 16px;
		font-weight: 400;
		color: rgba(235, 252, 255, 1);
	}

	.study-status-time-success {
		width: 680rpx;
		height: 88rpx;
		opacity: 1;
		border-radius: 60rpx;
		background: #16C1DB;
		margin-left: 32rpx;
		line-height: 88rpx;
		text-align: center;
		margin-top: 30rpx;
		font-size: 16px;
		font-weight: 400;
		color: #EBFCFF;
	}
</style>
